.contain-table-list {
    position: relative;
}

.layui-table-page {
    right: 0.4rem;
    border-top: none;
    bottom: 0.2rem;
}

.card-content {
    width: calc(100% - 6px);
    height: calc(100% - 0.6rem);
    border-bottom: 1px solid #19404F;
    margin-left: 3px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.card-item {
    line-height: calc(33% - 0.2rem);
    border: 1px solid #2C6F79;
    height: calc(33% - 0.2rem);
    margin-top: 0.15rem;
    width: calc(25% - 0.19rem);
    margin-left: 0.15rem;
    background-color: #0D2D39;

    & .card-item-title {
        height: 0.4rem;
        width: calc(100% - 0.3rem);
        margin-left: 0.15rem;
        line-height: 0.4rem;
        letter-spacing: 1px;
        font-size: 0.16rem;
        border-bottom: 1px solid #2C6F79;
        /* color: #22FFBE; */

        &::before {
            content: "";
            position: absolute;
            width: 0.04rem;
            height: 0.2rem;
            top: 0.1rem;
            left: 0;
            background-color: #3EEBDD;
        }

        & .card-item-status {
            float: right;
            padding: 0 0.1rem;

            &::before {
                display: inline-block;
                content: '';
                width: 0.13rem;
                height: 0.13rem;
                margin-right: 0.05rem;
                border-radius: 50%;

            }
        }
    }

    & .card-item-con {
        height: calc(100% - 0.7rem);
        width: calc(100% - 0.3rem);
        margin-left: 0.15rem;
        margin-top: 0.15rem;
        display: flex;

        .card-item-icon {
            width: 30%;
            height: 100%;
            background: linear-gradient(#127f8a66, #04caa566);
            display: flex;
            align-items: center;
            justify-content: center;

            & img {
                width: 0.39rem;
                height: 0.4rem;
            }
        }

        .card-item-msg {
            width: 70%;
            height: 100%;
            line-height: normal;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            >div {
                letter-spacing: 0;
                margin-left: 0.1rem;
            }
        }
    }

    &.device-normal .card-item-status {
        color: #22FFBE;
    }

    &.device-normal .card-item-status::before {
        background-color: #22FFBE;
    }

    &.device-warn:hover {
        img {
            filter: hue-rotate(210deg) drop-shadow(0 0 5px #ff6122) drop-shadow(3px 3px 2px #000);

        }
    }

    &.device-warn .card-item-status {
        color: #ff6122;
    }

    &.device-warn .card-item-status::before {
        background-color: #ff6122;
    }

    &.device-warn img {
        filter: hue-rotate(210deg);
    }

    &.device-warn .card-item-icon {
        background: linear-gradient(#c8c48566, #ff600066);
    }

    &.device-warn .card-item-title {
        color: #ff6122;
    }

    &.device-warn .card-item-title::before {
        background: linear-gradient(to right, #fffaad, #ff6122);
    }

}

.layui-form input {
    width: 2.8rem;
}

.no-data {
    font-size: 0.24rem;
    color: #aaa;
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layui-layer-tab .layui-layer-title span {
    color: #20C4FC;
    filter: brightness(2) saturate(0) contrast(10);

    & img {
        width: 0.16rem;
        margin-right: 0.04rem;
        margin-bottom: 0.01rem;
    }
}

.layui-layer-tab .layui-layer-title span.layui-this {
    height: 0.56rem;
    background-color: transparent;
    border: none;
    filter: none;

}

.tab-con {
    width: 100%;
    height: 100%;
    background-color: #0D2D39;
}

.layui-layer-tabmain,
.layui-layer-tabli {
    width: 100%;
    height: 100%;
}

.contain-tab {
    padding: 0.1rem 0.25rem;

    >.contain-tab-tool {
        width: 100%;
        height: 0.6rem;

        form {
            width: 100%;
            margin-top: 0.2rem;
            height: calc(100% - 0.2rem);
            display: flex;
            align-items: center;
        }
    }

    .contain-tab-list {
        width: 100%;
        height: calc(100% - 0.75rem);
        display: flex;
        overflow: hidden;
    }
}

.layui-table-header {
    background: #318E93;
}

.layui-table th {
    border: 1px solid #025f6f;
}

.class-layer-titLayer {

    top: 0.7rem !important;
    border: none;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    color: #63bad5;

    .layui-layer-content {
        padding: 0.06rem 0.15rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: flex;
        align-items: center;

        &::before {
            content: '';
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            background: url("../img/arrow.png");
            background-size: 100% 100%;
        }
    }

}


.tab-chart {
    width: 98%;
    height: 100%;
    margin-left: 1%;
    display: flex;
    flex-wrap: wrap;

    .tab-chart-item {
        width: 48%;
        height: 48%;
        margin: 0 1%;

        .tab-chart-title {
            width: 100%;
            height: 0.4rem;
            margin-top: 0.3rem;
            display: flex;
            align-items: center;
            color: #E2F1FF;
            position: relative;
            text-indent: 0.1rem;

            &::before {
                content: "";
                position: absolute;
                width: 0.04rem;
                height: 0.18rem;
                left: 0;
                background-color: #3EEBDD;
            }
        }

        .tab-chart-con {
            width: 100%;
            height: calc(100% - 0.7rem);
            border: 1px solid #2C6F79;
            background-color: #153640;
            border-radius: 0.04rem;
        }

    }

}


.tab-title {
    width: 100%;
    height: 0.4rem;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    color: #E2F1FF;
    position: relative;
    text-indent: 0.1rem;

    &::before {
        content: "";
        position: absolute;
        width: 0.04rem;
        height: 0.18rem;
        left: 0;
        background-color: #3EEBDD;
    }
}

.tab-item {
    width: 100%;
    border-radius: 0.04rem;
    background-color: #153640;
    border: 1px solid #2C6F79;
    display: flex;
    padding: 0.2rem;
    flex-wrap: wrap;
}

.layui-col-md3 {
    text-indent: 0.3rem;
    color: #E2F1FF;
    font-size: 0.16rem;
    margin: 0.1rem 0;
}

.data-item {
    display: flex;
    color: #E2F1FF;
    font-size: 0.16rem;
    height: 1rem;
    width: 20%;

    &:not(:last-child) {
        border-right: 1px solid #244C52;

    }

    .data-item-title {
        display: flex;
        flex-direction: column;
        width: 1.2rem;
        align-items: center;
        justify-content: center;
        height: 100%;


        img {
            width: 0.44rem;
            height: 0.44rem;
            margin: 0.16rem 0 0.04rem;
        }
    }

    .data-item-value {
        display: flex;
        align-items: center;
        height: 100%;
        flex-flow: column wrap;

        div {
            width: 0.8rem;
            height: 0.32rem;
            border-radius: 0.23rem;
            background: linear-gradient(180deg, rgba(117, 249, 255, 1) 0%, rgba(0, 97, 105, 1) 100%);
            border: 1px solid #65F0FF;
            font-size: 0.14rem;
            display: flex;
            align-items: center;
            text-indent: 0.1rem;
            margin-right: 0.2rem;
            margin-top: 0.15rem;
        }

    }
}